<template>
  <div>
    <!--地图-->
    <SuperMapLayerMap v-if="completeRefreshData==true"
              :map="map"
              :allRadioIndexData="allRadioIndexData"
              :allListData="allListData"
              :typeCodeDataList="typeCodeDataList"
              :resetClearAllBool="resetClearAllBool"
              :dataTypeInfoArray="dataTypeInfoArray"
              :queryGeomText="queryGeomText"
              :clickLonLatArr="clickLonLatArr"
              @getDetailDataById="getDetailDataById"
              @getLegendHtml="getLegendHtml"
              @getAllTempLayersSetList="getAllTempLayersSetList"
    ></SuperMapLayerMap>
    <!--图层图例-->
    <div v-if="showHideLegendDivBool" class="layerMap-legend">
      <!--滚动条-->
      <el-scrollbar max-height="500px">
        <p>图例</p>
        <div v-if="epicenterBool">
          <div style="margin-bottom: 10px;">
            <div style="width:15px;height: 15px;background-color: red;border-radius: 20px;float: left;margin-top: 4px;"></div>
            <div style="margin-left: 30px;">微观震中</div>
          </div>
          <div v-if="epicenterLayerBool2">
            <div style="width:15px;height: 15px;background-color: orange;border-radius: 20px;float: left;margin-top: 4px;"></div>
            <div style="margin-left: 30px;">初判宏观震中</div>
          </div>
        </div>
        <div v-if="legendInfoHtml && legendInfoHtml!==''" v-on:mouseenter="handleMouseEnter" v-on:mouseleave="handleMouseLeave" v-html="legendInfoHtml"></div>
        <div v-for="item in layerShowHideArray" :key="item.code" v-show="item.show" v-html="item.legendHtml">
        </div>
      </el-scrollbar>
    </div>
    <div class="new-legendDiv1" v-show="isCheckBoxBool2">
          <span style="font-size: 12px;">仪器烈度图例</span>
          <div><span style="float: right;">0-1</span><div style="border-color:rgb(246,249,254);" :style="{'background-color': 'rgb(246,249,254)'}" class="new-legendDiv-point"></div></div>
          <div><span style="float: right;">1-2</span><div style="border-color:rgb(151,235,255);" :style="{'background-color': 'rgb(151,235,255)'}" class="new-legendDiv-point"></div></div>
          <div><span style="float: right;">2-3</span><div style="border-color:rgb(184,209,254);" :style="{'background-color': 'rgb(184,209,254)'}" class="new-legendDiv-point"></div></div>
          <div><span style="float: right;">3-4</span><div style="border-color:rgb(123,255,155);" :style="{'background-color': 'rgb(123,255,155)'}" class="new-legendDiv-point"></div></div>
          <div><span style="float: right;">4-5</span><div style="border-color:rgb(236,249,13);" :style="{'background-color': 'rgb(236,249,13)'}" class="new-legendDiv-point"></div></div>
          <div><span style="float: right;">5-6</span><div style="border-color:rgb(255,198,0);" :style="{'background-color': 'rgb(255,198,0)'}" class="new-legendDiv-point"></div></div>
          <div><span style="float: right;">6-7</span><div style="border-color:rgb(255,134,0);" :style="{'background-color': 'rgb(255,134,0)'}" class="new-legendDiv-point"></div></div>
          <div><span style="float: right;">7-8</span><div style="border-color:rgb(254,53,0);" :style="{'background-color': 'rgb(254,53,0)'}" class="new-legendDiv-point"></div></div>
          <div><span style="float: right;">8-9</span><div style="border-color:rgb(222,1,2);" :style="{'background-color': 'rgb(222,1,2)'}" class="new-legendDiv-point"></div></div>
          <div><span style="float: right;">9-10</span><div style="border-color:rgb(157,0,0);" :style="{'background-color': 'rgb(157,0,0)'}" class="new-legendDiv-point"></div></div>
          <div><span style="float: right;">10+</span><div style="border-color:rgb(104,0,0);" :style="{'background-color': 'rgb(104,0,0)'}" class="new-legendDiv-point"></div></div>
        </div>
  </div>
</template>

<script setup name="SuperMapLayer">
import SuperMapLayerMap from '@/map/components/superMapLayer/map.vue';
import { iServerHttp } from "@/map/projMap.js";
import { warn, watch } from 'vue';

const props = defineProps(['map','layerDataTypeList','resetClearAllBool','geomText','clickLonLat','resultLegend','legendInfo','epicenterLayerBool','epicenterLayerBool2']);
const emits = defineEmits(['getAllTempLayersSetList'])
const showHideLegendDivBool = ref(false);//是否显示图例
const layerShowHideArray = ref([]);//图层是否显示数组

/*地图传参start*/
const completeRefreshData = ref(false);//防止刷新后地图不显示
const resetClearAllBool = ref(false);//是否重置清空全部图层数组
const queryGeomText = ref("");//限制查询范围的空间数据wkt
const clickLonLatArr = ref([]);//获取点击地图经纬度
const allListData = ref([]);//地图显示数据列表
const allRadioIndexData = ref([]);//全部序号列表
//数据图层显示列表
const collapseLayerData = ref([]);
//选择图层的版本号数据列表
const typeCodeDataList = ref([]);
//是否显示图层表格数据列表
const allTableDataBool = ref(false);
//图层表格数据列表
const allTableDataList = ref([]);
//表头字段数据列表
const allTableTitleList = ref([]);
//是否为空间数据
const isSpatialDataBool = ref(false);
//总数据量
const total = ref(0);
//当前数据类型图层名称
const currentLayerName = ref("");
//当前数据类型code
const currentLayerCode = ref("");
//当前数据版本号
const currentVersionCode = ref("");
//选中1条数据的ID
const selectId = ref("");
//数据类型
const dataTypeInfoArray = ref([
  //基础数据系统
  {database:"demtif", name: 'DEM高程数据', code: 'demgcsj', table:"",url:iServerHttp()+"/iserver/services/map-demtif/rest/maps/",zIndex:6,fieldId:""},
  {database:"datacenter", name: '断层', code: 'dc', table:"jc_fault",url:iServerHttp()+"/iserver/services/map-datacenter/rest/maps/jc_fault@datacenter",zIndex:7,fieldId:"id"},
  //现场灾害系统
  {database:"fxfzxczh", name: '房屋基础信息', code: 'fwjcxx13', table:"xczh_pc_data",url:iServerHttp()+"/iserver/services/map-fxfzxczh/rest/maps/xczh_pc_data@fxfzxczh",zIndex:7,fieldId:"xpd_id"},
  {database:"fxfzxczh", name: '震中', code: 'sddzzzsj', table:"xczh_seismic_event_management",url:iServerHttp()+"/iserver/services/map-fxfzxczh/rest/maps/xczh_seismic_event_management@fxfzxczh",zIndex:8,fieldId:"xsem_id"},
]);
//根据ID查询数据属性表
const getDetailDataById = (temp)=>{
  console.log("开始根据ID查询数据属性表");
  let typeCode = temp.typeCode;
  let id = temp.id;
  let params = {
    typeCode : typeCode,//三级数据类别（数据表）code
    id : id,
  }
  allTableDataBool.value = false;
  allTableDataList.value = [];//清空根据ID查询数据属性表
  allTableTitleList.value = [];
  //获取数据图层名称
  currentLayerName.value = getDictItemNameByCode(typeCode);
  //当前数据类型code
  currentLayerCode.value = typeCode;
  //当前数据版本号
  currentVersionCode.value = "";
  //选中1条数据的ID
  selectId.value = id;
  //是否为空间数据
  isSpatialDataBool.value = true;
}
const isCheckBoxBool2 = ref(false)
function handleMouseEnter(val) {
  console.log(val.target)
  let list = val.target.children
  for(let i = 0; i < list.length;i++) {
    if(list[i].innerText.indexOf('仪器烈度')!=-1) {
      isCheckBoxBool2.value = true;
      return
    }
  }
  console.log('鼠标悬停在div上');
  // 在这里执行鼠标悬停时的逻辑
}
function handleMouseLeave(val) {
  let list = val.target.children
  for(let i = 0; i < list.length;i++) {
    if(list[i].innerText.indexOf('仪器烈度')!=-1) {
      isCheckBoxBool2.value = false;
      return
    }
  }
}
//图例
const getLegendHtml = (obj)=>{
  console.log("getLegendHtml");
  console.log(obj);
  //图层显示隐藏数组
  let showHideArray = layerShowHideArray.value;
  if(obj!=null){
    for(let i=0;i<showHideArray.length;i++){
      if(showHideArray[i].name==obj.name){
        showHideArray[i].show = obj.show;
        showHideArray[i].legendHtml = obj.legendHtml;//显示图例
        break;
      }
    }
    //是否显示图例
    let bool = false;
    for(let i=0;i<showHideArray.length;i++){
      if(showHideArray[i].show){
        bool = true;
        break;
      }
    }
    // showHideLegendDivBool.value = bool;
    if(bool==false){
      if(legendInfoHtml.value==null || legendInfoHtml.value==""){
        showHideLegendDivBool.value = false;
      }else{
        showHideLegendDivBool.value = true;
      }
    }else{
      showHideLegendDivBool.value = true;
    }
  }else{//清空图例
    //是否显示图例
    for(let i=0;i<showHideArray.length;i++){
      showHideArray[i].show = false;
    }
    // showHideLegendDivBool.value = false;
    if(legendInfoHtml.value==null || legendInfoHtml.value==""){
      showHideLegendDivBool.value = false;
    }
  }
}
//获取全部图层信息列表
const getAllTempLayersSetList = (obj)=>{
  console.log("getAllTempLayersSetList");
  console.log(obj);
  emits('getAllTempLayersSetList', obj);
}
/*地图传参end*/

//设置图例
function setLayerShowHideArray(){
  let showHideArray = [];
  let dataTypeArray = dataTypeInfoArray.value;
  for(let i=0;i<dataTypeArray.length;i++){
    let item = dataTypeArray[i];
    showHideArray.push({ code: item.code, name: item.name, show:false,legendHtml:"" });
  }
  layerShowHideArray.value = showHideArray;
}

//获取数据图层显示列表
const getAllTreeData = ()=>{
  /**
   * dictCode :类别code 数据类别的dictItemCode
   * 活断层 hdc
   */
  let list = [
    {dictItemCode:"hdc",dictItemName:"活断层",children:[{dictItemCode:"dc",dictItemName:"断层"}]},
    {dictItemCode:"demgc",dictItemName:"DEM",children:[{dictItemCode:"demgcsj",dictItemName:"DEM高程"}]},
    {dictItemCode:"fwjcxx",dictItemName:"房屋基础信息",children:[{dictItemCode:"fwjcxx13",dictItemName:"房屋基础信息"}]},
    {dictItemCode:"sddzzz",dictItemName:"设定地震震中",children:[{dictItemCode:"sddzzzsj",dictItemName:"震中"}]},
  ];
  let collapseLayerDataArray = [];
  let typeCodeDataArray = [];
  let allRadioIndexArray = [];
  if(list!=null && list.length>0){
    for(let i=0;i<list.length;i++){
      let data = list[i];
      let childrenData = [];
      let children = data.children;
      for(let j=0;j<children.length;j++){
        /*let bool = false;
        if(children[j].isSpatialData==1){//空间数据
          bool = true;
        }*/
        let bool = true;//空间数据
        childrenData.push({
          name: children[j].dictItemName,
          spaceBool:bool,//是否空间数据
          dictItemCode: children[j].dictItemCode,
        });
        //选择图层的版本号数据列表
        typeCodeDataArray.push({
          name: children[j].dictItemName,
          typeCodeSelectData:[],
          dictItemCode: children[j].dictItemCode,
          spaceBool:bool,//是否空间数据
          fitBool:false,//是否缩放到范围
          queryGeomBool:false,//是否限制查询范围
        });
        //全部序号列表
        allRadioIndexArray.push(children[j].dictItemCode);//三级数据类别
      }
      let collapseData = {
        value:data.dictItemCode,
        label: data.dictItemName,
        children: childrenData,
        dictItemCode: data.dictItemCode,
      }
      collapseLayerDataArray.push(collapseData);
    }
  }

  //数据图层显示列表
  collapseLayerData.value = collapseLayerDataArray;
  //选择图层的版本号数据列表
  typeCodeDataList.value = typeCodeDataArray;
  console.log("typeCodeDataList.value");
  console.log(typeCodeDataList.value);
  //全部序号列表
  allRadioIndexData.value = allRadioIndexArray;
  //显示地图模块
  completeRefreshData.value = true;
}

//根据三级数据类别获取版本数据
const getLayerInfoByDictItemCode = (dictItemCode) => {
  let data = null;
  let datalist = typeCodeDataList.value;
  for(let i=0;i<datalist.length;i++){
    if(datalist[i].dictItemCode==dictItemCode){
      data = datalist[i];
      break;
    }
  }
  console.log("根据三级数据类别获取版本数据");
  console.log(typeCodeDataList.value);
  console.log(data);
  return data;
}

//根据三级数据类别（数据表）code获取数据图层名称
const getDictItemNameByCode = (typeCode) => {
  let dictItemName = "";
  let list = typeCodeDataList.value;
  for(let i=0;i<list.length;i++){
    if(list[i].dictItemCode==typeCode){
      dictItemName = list[i].name;
      break;
    }
  }

  return dictItemName;
}

//查询版本号对应图层数据（基础数据系统）
const getDataByVersionCode = (versionCode,typeCode,spatialBool,tifFileName)=>{
  console.log("开始查询版本号对应图层数据");
  /*let params = {
    typeCode : typeCode,//三级数据类别（数据表）code
    versionCode : versionCode,//版本号
    page:1,//页码
    rows:100,//分页数据量
  }*/
  allTableDataBool.value = false;
  allTableDataList.value = [];//清空图层表格数据列表
  allTableTitleList.value = [];
  //获取数据图层名称
  currentLayerName.value = getDictItemNameByCode(typeCode);
  //当前数据类型code
  currentLayerCode.value = typeCode;
  //当前数据版本号
  currentVersionCode.value = versionCode;
  //选中1条数据的ID
  selectId.value = "";

  if (typeCode == "demgcsj") {//高程
    allListData.value = [typeCode,versionCode,[],true,tifFileName];//显示超图图层
  }else{
    allListData.value = [typeCode,versionCode,[],true,null];//显示超图图层
  }
}

//查询版本号对应图层数据（现场灾害系统）
const getDataByVersionCodeYw = (versionCode,typeCode,spatialBool,tifFileName)=>{
  console.log("开始查询版本号对应图层数据");
  /*let params = {
    typeCode : typeCode,//三级数据类别（数据表）code
    versionCode : versionCode,//版本号
    page:1,//页码
    rows:100,//分页数据量
  }*/
  allTableDataBool.value = false;
  allTableDataList.value = [];//清空图层表格数据列表
  allTableTitleList.value = [];
  //获取数据图层名称
  currentLayerName.value = getDictItemNameByCode(typeCode);
  //当前数据类型code
  currentLayerCode.value = typeCode;
  //当前数据版本号
  currentVersionCode.value = versionCode;
  //选中1条数据的ID
  selectId.value = "";

  if (typeCode == "demgcsj") {//高程
    allListData.value = [typeCode,versionCode,[],true,tifFileName];//显示超图图层
  }else{
    allListData.value = [typeCode,versionCode,[],true,null];//显示超图图层
  }
}

//设置图层选择的版本号列表（添加、移除）并查询图层数据
function setActiveTypeCodeList(versionCode,typeCode,showBool,isYw,tifFileName){
  //根据三级数据类别获取版本数据
  let data = getLayerInfoByDictItemCode(typeCode);
  if(data!=null && versionCode){
    let typeCodeSelectArray = data.typeCodeSelectData;
    let bool = null;//是否添加版本号
    //添加、移除版本号
    if (!typeCodeSelectArray.includes(versionCode)) {
      if(showBool){
        typeCodeSelectArray.push(versionCode);//添加
        bool = true;
      }
    } else {
      typeCodeSelectArray.forEach((id, index) => {
        if (id === versionCode) {
          if(showBool==false){
            typeCodeSelectArray.splice(index, 1);//移除
            bool = false;
          }
        }
      });
    }
    console.log("设置图层选择的版本号列表");
    console.log(typeCodeSelectArray);
    //设置图层对应的选择版本号列表
    data.typeCodeSelectData = typeCodeSelectArray;
    //是否为空间数据
    isSpatialDataBool.value = data.spaceBool;
    resetClearAllBool.value = false;//是否重置清空全部图层数组
    console.log("showBool:"+showBool+",bool:"+bool);
    //空间数据
    if(showBool && bool){//添加版本号
      //根据图层类型查询图层版本号数据
      if(isYw){
        //查询版本号对应图层数据（现场灾害系统）
        getDataByVersionCodeYw(versionCode,typeCode,true,tifFileName);
      }else{
        //查询版本号对应图层数据（基础数据系统）
        getDataByVersionCode(versionCode,typeCode,true,tifFileName);
      }
      return true;
    }else if(showBool==false && bool==false){//移除版本号
      allListData.value = [typeCode,versionCode,[],false,null];
      allTableDataBool.value = false;
      allTableDataList.value = [];//清空图层表格数据列表
      allTableTitleList.value = [];
      return true;
    }
  }
  return false;
}

//根据code获取超图图层数据类型信息
function getDataTypeInfoByCode(code){
  let dataTypeInfo = null;
  if(code){
    let array = dataTypeInfoArray.value;
    for(let i=0;i<array.length;i++){
      if(code==array[i].code){
        dataTypeInfo = array[i];
        break;
      }
    }
  }

  return dataTypeInfo;
}

//清空全部已选版本号
function clearAllTypeCodeSelectData(){
  let list = typeCodeDataList.value;
  for(let i=0;i<list.length;i++){
    list[i].typeCodeSelectData = [];
  }
}

//根据数据类别code、版本号查询图层
function getLayerByVersionDataType(i){
  let list = props.layerDataTypeList;
  if(i<list.length){
    let level2DataType = list[i].level2DataType;//数据类别二级code
    let level3DataType = list[i].level3DataType;//数据类别三级code
    let versionCode = list[i].versionCode;//版本号："全部"则展示整个图层，null无版本号不展示
    let showBool = list[i].show;//是否显示
    let isYw = list[i].isYw;//是否为业务系统数据，true业务系统，false基础数据系统
    let tifFileName = list[i].tifFileName;//tif文件名称
    console.log("versionCode:"+versionCode+",level3DataType:"+level3DataType+",show:"+showBool);
    //设置图层选择的版本号列表（添加、移除）并查询图层数据
    let returnBool = setActiveTypeCodeList(versionCode,level3DataType,showBool,isYw,tifFileName);
    console.log("returnBool"+returnBool);
    if((i+1)<list.length){
      if(returnBool){
        setTimeout(function(){
          //根据数据类别code、版本号查询图层
          getLayerByVersionDataType(i+1);
        },1000);
      }else{
        //根据数据类别code、版本号查询图层
        getLayerByVersionDataType(i+1);
      }
    }
  }
}

//获取图层数据类别code和版本号
const getlayerDataTypeList = watch(() => props.layerDataTypeList, value => {// watch函数监听props.layerDataTypeList
  if(value){
    console.log("获取图层数据类别code和版本号");
    console.log(value);
    setTimeout(function(){
      //根据数据类别code、版本号查询图层
      getLayerByVersionDataType(0);
    },1000);
  }
},{immediate:true,deep:true});

const epicenterBool = ref(false)
watch(() => props.epicenterLayerBool, value => {
  if(value) {
    epicenterBool.value = true
    showHideLegendDivBool.value = true
  }else{
    epicenterBool.value = false
  }
},{immediate:true,deep:true});

//清空全部图层
const resetClearAll = watch(() => props.resetClearAllBool, value => {// watch函数监听props.resetClearAllBool
  if(value){
    resetClearAllBool.value = true;//清空全部图层
    clearAllTypeCodeSelectData();//清空全部已选版本号
    getLegendHtml(null);//清空图例
  }
},{immediate:true});

//限制查询范围
const setQueryGeomText = watch(() => props.geomText, value => {// watch函数监听props.geomText
  if(value){
    queryGeomText.value = value;
  }else{
    queryGeomText.value = "";
  }
},{immediate:true});

//获取点击地图经纬度
const getClickLonLat = watch(() => props.clickLonLat, value => {// watch函数监听props.clickLonLat
  if(value){
    console.log("传递点击地图经纬度");
    console.log(value);
    clickLonLatArr.value = value;
  }
},{immediate:true});

//计算结果图例
const resultLegendHtml = ref("");
//获取计算结果图例
const getResultLegendHtml = watch(() => props.resultLegend, value => {// watch函数监听props.resultLegend
  if(value){
    console.log("获取计算结果图例");
    console.log(value);
    //计算结果图例
    resultLegendHtml.value = value;
  }
},{immediate:true});


const legendInfoHtml = ref("");
//获取图例
const getLegendInfoHtml = watch(() => props.legendInfo, value => {// watch函数监听props.legendInfo
  if(value){
    console.log("获取计算结果图例");
    console.log(value);
    //图例
    legendInfoHtml.value = value;
    showHideLegendDivBool.value = true;
  }
},{immediate:true});

onMounted(() => {
  setLayerShowHideArray();
  getAllTreeData();//获取数据图层显示列表
})
</script>

<style scoped lang="scss">
//图例
.layerMap-legend {
  position: absolute;
  right: 10px;
  bottom: 10px;
  min-height: 50px;
  background: #fff;
  padding: 10px;
  overflow: auto;
  height: 165px;
  min-width: 200px;
  box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
  border:1px solid #707070;
  border-radius: 4px;
}
.layerMap-legend p:first-child{
  text-align: center;font-weight: bold;
}
.new-legendDiv1 {
  position: absolute;
  bottom: 0px;
  right: 212px;
  background: #fff;
  box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
  border: 1px solid #707070;
  border-radius: 4px;
  padding: 5px;
  width: 84px;
}
.new-legendDiv1 div {
  position: relative;
  height: 16px;
  line-height: 16px;
  font-size: 13px;
  margin: 0 1px 0 1px;
}
.new-legendDiv-point {
  position: relative !important;
  left: 10px !important;
  top: 0px !important;
  border-radius:5px;
  background:#fff;
  width: 10px !important;
  height: 10px !important;
}
</style>